<template>
  <div class="dashboard-container">
    <div class="dashboard-text">欢迎您，{{ name }}。</div>
    <div class="link-area">
      <div v-for='(item, index) in perMenu' :key='item.name' @click="toPage(item.name)" class="link-item">
        <div class="top-icon">
          <i v-if="item.meta.icon.includes('el-icon')" :class="item.meta.icon" :style="`color: ${findColor(index)}`"/>
          <svg-icon v-else :icon-class="item.meta.icon" :style="`color: ${findColor(index)}`"/></div>
        <div class="title">{{ item.meta.title }}</div>
      </div>
      <!-- <div @click="logOut" class="link-item">
        <div class="top-icon">
          <svg-icon icon-class="exit" :style="`color: ${findColor(5)}`"/></div>
        <div class="title">退出登录</div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import router from '../../router'
import { flattenTree } from '@/utils/index'

export default {
  name: 'Dashboard',
  data() {
    return {
      perFlatten: [],
      menus: ['UserSetting', 'MenuSetting', 'RoleSetting', 'OrderList', 'DesignList']
    }
  },
  computed: {
    ...mapGetters([ 'name', 'roles', 'permission_routes']),
    perMenu() {
      return this.menus.map(name => {
        return this.perFlatten.find(menu => menu.name === name)
      }).filter(item => item) || []
    }
  },
  watch: {
    permission_routes() {
      this.perFlatten = flattenTree(this.permission_routes)
    }
  },
  mounted() {
    this.perFlatten = flattenTree(this.permission_routes)
  },
  methods: {
    toPage(name) {
      router.push({ name: name })
    },
    findColor(index) {
      return ['#ffc107', 'rgb(12, 192, 201)', '#2196f3', '#4caf50', '#9c27b0', 'rgb(255, 105, 82)'][index]
    },
    async logOut() {
      await this.$store.dispatch('user/logout')
      // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      this.$router.push(`/login`)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    .link-area{
      display: flex;
      width: 80%;
      flex-wrap: wrap;
      .link-item{
        cursor: pointer;
        border: 1px solid #ccc;
        border-radius: 8px;
        text-align: center;
        width: 100px;
        height: 100px;
        margin: 20px;
        &:hover{
          box-shadow: 2px 8px 15px 0 rgba(0, 0, 0, .04),
        }
        .top-icon{
          font-size: 40px;
          line-height: 40px;
          height: 40px;
          margin-top: 20px;
        }
        .title{
          height: 40px;
          font-size: 14px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  &-text {
    font-size: 24px;
    line-height: 46px;
  }
}
</style>
